<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    :root {
      /* 定义变量 */
      --myWidth: 520px;
      --myHeight: 280px;
      --size: 5;
    }

    #windows {
      /* 给子/后代节点作为绝对定位的参照物 */
      position: relative;
      /* 盒子居中 */
      margin: auto;
      width: var(--myWidth);
      height: var(--myHeight);
    }

    #box {
      /* 设置水平滚动条 */
      overflow-x: hidden;
      overflow-y: hidden;
      /* 圆角 */
      border-radius: 8px;
    }

    #imgs {
      width: calc(var(--myWidth) * var(--size));
      height: var(--myHeight);
      background-color: aquamarine;
      font-size: 0px;
      /*设置空格不显示*/

    }

    /* 选择到id为imgs的盒子的图片儿子 */
    #imgs>img {
      width: var(--myWidth);
      height: var(--myHeight);
    }

    #leftBtn {
      left: 0px;
    }

    #rightBtn {
      right: 0px;
    }

    .btn {
      /* 绝对定位:参照有定位的长辈节点 */
      position: absolute;
      z-index: 2;
      top: calc(50% - 15px);
    }

    #flags {
      width: 40px;
      position: absolute;
      z-index: 2;
      left: calc(50% - 20px);
      bottom: 10px;
    }
    #flags>a {/*设置3个a链接为圆点*/
      background-color: rgba(255, 255, 255, 0.5);
      border-radius: 50%;
      display: inline-block;
      width:8px;
      height: 8px;
    }
    /* 中间的圆点，排开左边和右边3个像素的距离 */
    #m2 {
      margin-left: 3px;
      margin-right: 3px;
    }
    .choose {/*选中圆点的颜色*/
      background-color: rgba(209, 55, 75, 0.8) !important;
    }
  </style>
</head>

<body>
  <div id="windows">
    <a id="leftBtn" class="btn" href="javascript:;"><img src="l.webp"></a>
    <a id="rightBtn" class="btn" href="javascript:;"><img src="r.webp"></a>
    <div id="flags">
      <a id="m1" href="javascript:;" class="choose"></a>
      <a id="m2" href="javascript:;"></a>
      <a id="m3" href="javascript:;"></a>
    </div>
    <div id="box">
      <div id="imgs">
        <img src="3.avif">
        <img src="1.avif">
        <img src="2.avif">
        <img src="3.avif">
        <img src="1.avif">
      </div>
    </div>
  </div>

  <script>
    // 找到左右按钮
    let leftBtn = document.querySelector("#leftBtn");
    let rightBtn = document.querySelector("#rightBtn");
    let box = document.querySelector("#box");

    // 默认定位到第一张
    box.scrollLeft = 520

    function choosePoint() {
      let value = box.scrollLeft
      // 清除上一个选中的点
      document.querySelector(".choose").classList.remove("choose");
      if(value == 0) {
        document.querySelector("#m3").classList.add("choose");
      }
      if(value == 520) {
        document.querySelector("#m1").classList.add("choose");
      }
      if(value == 520 * 2) {
        document.querySelector("#m2").classList.add("choose");
      } 
      if(value == 520 * 3) {
        document.querySelector("#m3").classList.add("choose");
      } 
      if(value == 520 * 4) {
        document.querySelector("#m1").classList.add("choose");
      } 
    }

    leftBtn.onclick = leftScrollImg;
    rightBtn.onclick = rightScrollImg
    function leftScrollImg() {
      // 要滚动的时候
      box.scrollLeft -= 10;
      // 获取盒子滚动条的距离
      let value = box.scrollLeft;
      if(value % 520 != 0)  {
        setTimeout(leftScrollImg, 1)
      } else {
        choosePoint();
      }
      // 判断如果到了第一张，就闪现
      if(value == 0) {
        box.scrollLeft = 520 * 3;
      }
    }
    function rightScrollImg() {
      // 要滚动的时候
      box.scrollLeft += 10;
      // 获取盒子滚动条的距离
      let value = box.scrollLeft;
      if(value % 520 != 0)  {
        setTimeout(rightScrollImg, 1)
      } else {
        choosePoint();
      }
      // 判断如果到了最后一张，就闪现
      if(value == 520 * 4) {
        box.scrollLeft = 520;
      }
    }
    // 鼠标移入box盒子，停止滚动
    box.onmouseenter = function () {
      // 清除定时器
      clearInterval(timer)
    }
    box.onmouseleave = function () {
      // 重新打开定时器
      timer = setInterval(rightScrollImg, 2000)
    }
    // setInterval 一直做
    // setTimeout 做一次
    let timer = setInterval(rightScrollImg, 2000)
  </script>
</body>

</html>